<template>
	<page>
		<view class="friend-info">
      <view class="pic-info">
        <view class="pic">
          <fui-avatar :src="info.avatar_pic" width="120" height="120" mode="aspectFill" shape="square"></fui-avatar>
        </view>
      </view>
      <view class="friend-data">
        <view class="nickname">
          <text>{{info.nickname}}</text>
        </view>
        <view class="desc">
          <text>ID：</text>
          <text>{{info.pid}}</text>
        </view>
        <view class="desc">
          <text>签名：</text>
          <text>{{info.signature}}</text>
        </view>
      </view>
    </view>
<!--    <view class="tool-item">-->
<!--      <view class="item">-->
<!--        <view class="title">-->
<!--          <text>更多信息</text>-->
<!--        </view>-->
<!--        <view class="more">-->
<!--          <text class="right-arrows"></text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
    <view class="operation-btn">
      <view class="btn" @click="onSendMessage" v-if="info.isFriend === 1">
        <image src="/static/images/icon/xxfs_icon.png"></image>
        <text>发消息</text>
      </view>
      <view class="btn" v-else-if="info.isFriend === -1">
        <text>已发送申请</text>
      </view>
      <view class="btn" @click="onAddFriend" v-else>
        <image src="/static/images/icon/xxfs_icon.png"></image>
        <text>添加好友</text>
      </view>
      <view class="btn" @click="onBlacklist(1)" v-if="info.status === 0">
        <image src="/static/images/icon/lhhy_icon.png"></image>
        <text style="color: red">拉黑</text>
      </view>
      <view class="btn" @click="onBlacklist(0)" v-else>
        <image src="/static/images/icon/lhhy_icon.png"></image>
        <text style="color: red">已拉黑</text>
      </view>
    </view>
    <fui-dialog :show="confirmShow"
                title="申请"
                maskClosable
                @click="confirmSubmit"
                @close="onConfirmClose">
      <view class="apply-info">
        <view class="content">
          <textarea placeholder="请输入申请信息" v-model="applyContent"></textarea>
        </view>
      </view>
    </fui-dialog>
	</page>
</template>

<script setup>
import {addFriend, friendBlackList, friendData} from "../../api/api";
import {onLoad} from "@dcloudio/uni-app";
import {getCurrentInstance, ref} from "vue";

const { proxy } = getCurrentInstance();
const pid = ref(0);
const to_user_id = ref(0);
const isBack = ref(0);
const info = ref({});
const confirmShow = ref(false);
// 申请内容
const applyContent = ref('');

onLoad((params) =>{
  pid.value = Number(params.pid||'0');
  to_user_id.value = Number(params.to_user_id||'0');
  isBack.value = Number(params.isBack||'0');
  getData();
})

function getData(){
  friendData({
    pid: pid.value,
    to_user_id: to_user_id.value,
  }).then(res =>{
    info.value = res.data;
  })
}

/**
 * 发送消息点击
 */
function onSendMessage(){
  proxy.$global.toUserInfo = {
    nickname: info.value.nickname,
    avatar_pic: info.value.avatar_pic,
    sid: '',
  }
  // 是否可返回
  if(isBack.value){
    uni.navigateBack();
    return;
  }
  uni.navigateTo({
    url: `/pages/ChatPage/ChatPage?to_user_id=${info.value.user_id}`
  })
}
/**
 * 拉黑点击
 */
function onBlacklist(status){
  uni.showModal({
    title: '提示',
    content: status === 1 ? '拉黑对方你将收不到对方任何消息，是否要拉黑？' : '是否要解除拉黑状态',
    success: (res) => {
      if (res.confirm) {
        console.log('用户点击确定');
        friendBlackList({
          friend_id: info.value.friend_id,
          to_user_id: info.value.user_id,
          status: status
        }).then(res =>{
          proxy.$way.toast(res.msg);
          info.value.status = status;
        })
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  })
}
/**
 * 好友添加点击
 * @param {Object} item
 */
function onAddFriend(item){
  confirmShow.value = true;
}

/**
 * 确认提交
 */
function confirmSubmit(){
  confirmShow.value = false;
  addFriend({
    to_user_id: info.value.user_id,
    desc: applyContent.value
  }).then(res =>{
    proxy.$way.toast(res.msg);
    info.value.isFriend = -1;
  })
}
function onConfirmClose(){
  confirmShow.value = false;
}
</script>

<style lang="scss">
  @import "FriendInfo";
</style>
